<!-- 重要经济目标 -->
<template>
	<div class="economic-goals">
		<el-card shadow="always" class="custom-card">
			<el-row>
				<el-form :model="queryParams" ref="queryForm">
					<el-row>
						<el-form-item label="行政区域" prop="district">
							<el-select v-model="queryParams.district" size="default" placeholder="请选择"
								style="width: 200px" clearable filterable>
								<el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel"
									:value="item.dictValue" />
							</el-select>
						</el-form-item>

						<el-form-item label="经济目标名称" prop="name">
							<el-input style="width:180px" v-model="queryParams.name"></el-input>
						</el-form-item>

						<div class="custom-btns">
							<el-button type="primary" :icon="Search" @click="handleSearch" @keyup.prevent
								@keydown.enter.prevent>查询</el-button>
							<el-button type="warning" :icon="Refresh" @click="handleRefresh" @keyup.prevent
								@keydown.enter.prevent>重置</el-button>
							<el-button type="primary" :icon="Plus" @click="handleAdd" @keyup.prevent
								@keydown.enter.prevent>新增</el-button>
							<el-button :icon="Upload" @click="handleUpload" @keyup.prevent
								@keydown.enter.prevent>导入</el-button>
							<el-button type="primary" :icon="Download" @click="handleDown" @keyup.prevent
								@keydown.enter.prevent plain>导出</el-button>
							<el-button type="danger" :icon="Delete" @click="handleDel" @keyup.prevent
								@keydown.enter.prevent :disabled="multiple">批量删除</el-button>
						</div>
					</el-row>
				</el-form>
			</el-row>

			<el-row style="margin-top:10px">
				<el-table :data="tableData" ref="multipleTable" height="600" @selection-change="handleChange">
					<el-table-column type="selection" width="50" align="center" />
					<el-table-column prop="name" label="经济目标名称" align="center" />
					<el-table-column prop="district" label="行政区域" align="center">
						<template #default="scope">
							<span>{{getName(scope.row.district)}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="headquarters" label="战时所需人防指挥部" align="center">
						<template #default="scope">
							<span>{{getZhbName(scope.row.headquarters)}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="类型" align="center">
						<template #default="scope">
							<span>{{getJjmbTypeName(scope.row.type)}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="level" label="等级" align="center">
						<template #default="scope">
							<span>{{getLevelName(scope.row.level)}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="longitude" label="经度" align="center" />
					<el-table-column prop="latitude" label="纬度" align="center" />
					<el-table-column prop="detailedAddress" label="详细位置" align="center" />
					<el-table-column prop="detail" label="公司介绍" align="center" />
					<el-table-column label="操作" align="center" width="140">
						<template #default="scope">
							<div style="margin-bottom: 4px;margin-top: 2px;">
								<el-button type="success" :icon="EditPen" bg text
									@click.prevent="handleEdit(scope.row)">编辑</el-button>
							</div>

							<div style="margin-bottom: 4px;">
								<el-button type="danger" :icon="Delete" bg text
									@click.prevent="handleDel(scope.row)">删除</el-button>
							</div>

							<div style="margin-bottom: 4px;">
								<el-button type="primary" bg text
									@click.prevent="handleZhz(scope.row)">指挥组列表</el-button>
							</div>
							<div style="margin-bottom: 4px;">
								<el-button type="primary" bg text
									@click.prevent="handleFhbw(scope.row)">防护部位列表</el-button>
							</div>
							<div style="margin-bottom: 4px;">
								<el-button type="primary" bg text
									@click.prevent="handleYxfw(scope.row)">影响范围列表</el-button>
							</div>
							<div style="margin-bottom: 4px;">
								<el-button type="primary" bg text
									@click.prevent="handleFhzyd(scope.row)">防护专业队列表</el-button>
							</div>
							<div style="margin-bottom: 4px;">
								<el-button type="primary" bg text
									@click.prevent="handleXxfhcs(scope.row)">信息防护措施</el-button>
							</div>
							<div style="margin-bottom: 4px;">
								<el-button type="primary" bg text
									@click.prevent="handleZbmx(scope.row)">装备明细列表</el-button>
							</div>
							<div>
								<el-button type="primary" bg text
									@click.prevent="handleDjfs(scope.row)">打击方式列表</el-button>
							</div>

							<div>
								<el-button type="primary" bg text
									@click.prevent="handleZkzb(scope.row)">指控装备</el-button>
							</div>

							<div>
								<el-button type="primary" bg text
									@click.prevent="handleTxwl(scope.row)">通信网络</el-button>
							</div>

							<div>
								<el-button type="primary" bg text
									@click.prevent="handleTxzb(scope.row)">通信装备</el-button>
							</div>

						</template>
					</el-table-column>
				</el-table>
			</el-row>
			<Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize" @pagination="getList" />

			<el-dialog title="新增" v-model="addOpen" width="700px" destroy-on-close append-to-body
				:close-on-click-modal="false" draggable>
				<economic-goals-add @closeWindow="closeWindow" @getList="getList" :options="options"
					:jjmbOptions="jjmbOptions" :zhbOptions="zhbOptions"
					:levelOptions="levelOptions"></economic-goals-add>
			</el-dialog>
			<el-dialog title="编辑" v-model="editOpen" width="700px" destroy-on-close append-to-body
				:close-on-click-modal="false" draggable>
				<economic-goals-add @closeWindow="closeWindow" @getList="getList" :editData="editData"
					:options="options" :jjmbOptions="jjmbOptions" :zhbOptions="zhbOptions"
					:levelOptions="levelOptions"></economic-goals-add>
			</el-dialog>


			<el-dialog :title="upload.title + '导入'" v-model="open" width="400px" destroy-on-close append-to-body
				:close-on-click-modal="false" draggable>
				<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
					:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
					:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
					<el-icon class="el-icon--upload"><upload-filled /></el-icon>
					<div class="el-upload__text">
						将文件拖到此处，或<em>点击上传</em>
					</div>
					<template #tip>
						<div class="el-upload__tip">
							<span> 仅允许导入xls、xlsx格式文件。</span>
							<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
								@click="importTemplate">下载模板</el-link>
						</div>
					</template>
				</el-upload>
				<div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
					<el-button type="primary" @click="submitFileForm">确 定</el-button>
					<el-button @click="open = false">取 消</el-button>
				</div>
			</el-dialog>

		</el-card>
	</div>
</template>

<script setup>
	import {
		EditPen,
		Delete,
		Plus,
		Search,
		Refresh,
		Upload,
		Download
	} from '@element-plus/icons-vue'
	import {
		reactive,
		ref
	} from 'vue';
	import Pagination from '@/layout/components/Pagination/pagination.vue'

	import {
		getEconomicGoalsList,
	} from '@/api/organize/organize'

	import EconomicGoalsAdd from './child/EconomicGoalsAdd.vue'

	import {
		useStore
	} from '@/store/store'

	import {
		commonDownload,
		commonTemplate,
		commonInterface,
		commonGetDistrictList,
		commonJjmbType,
		commonZhbList,
		commonJjmbLevel
	} from '@/api/common/common'

	import {
		useRouter
	} from 'vue-router'

	const queryParams = reactive({
		pageNum: 1,
		pageSize: 10,
		district: '',
		name: ''
	})
	const total = ref(1)
	const queryForm = ref('')
	const tableData = ref([])
	const addOpen = ref(false)
	const editOpen = ref(false)
	const editData = ref()
	const open = ref(false)
	const uploadRef = ref()
	const store = useStore()

	const options = ref([])
	const jjmbOptions = ref([])
	const zhbOptions = ref([])
	const levelOptions = ref([])

	const router = useRouter()

	const batchIds = ref()
	const multiple = ref(true)

	const upload = reactive({
		title: '经济目标',
		headers: {
			Authorization: store.token
		},
		// 是否禁用上传
		isUploading: false,
		// 是否更新已经存在的用户数据
		updateSupport: 0,
		// 上传的地址
		url: process.env.VUE_APP_BASE_URL + "/back/renfang/jjmb/mes/importData"
	}, )

	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	const getList = (e) => {
		if (!!e) {
			if (typeof(e.page) == 'number') {
				queryParams.pageNum = e.page
			}
			if (typeof e.limit == 'number') {
				queryParams.pageNum = 1
				queryParams.pageSize = e.limit
			}
		}
		getEconomicGoalsList(queryParams).then(result => {
			if (result.code === 200) {
				tableData.value = result.rows
				total.value = result.total
			}
		})
	}

	// 查询
	const handleSearch = () => {
		getList()
	}
	// 重置
	const handleRefresh = () => {
		queryForm.value.resetFields()
		getList()
	}

	//获取选中数据
	const handleChange = (selection) => {
		batchIds.value = selection.map(item => item.id)
		multiple.value = !selection.length
	}

	// 新增
	const handleAdd = () => {
		addOpen.value = true
	}
	// 编辑
	const handleEdit = (e) => {
		commonInterface('/back/renfang/jjmb/mes/', e.id, 'get').then(result => {
			if (result.code === 200) {
				editData.value = result.data
				editOpen.value = true
			}
		})
	}
	// 删除
	const handleDel = (e) => {
		const ids = e.id || batchIds.value
		ElMessageBox.confirm(
			'是否确认删除当前数据?',
			'系统提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
			commonInterface('/back/renfang/jjmb/mes/', ids, 'delete').then(result => {
				if (result.code === 200) {
					ElMessage.success(result.msg)
					getList()
				} else {
					ElMessage.error(result.msg)
				}
			})
		}).catch(() => {})
	}

	// 导入
	const handleUpload = () => {
		open.value = true
	}

	// 文件上传中处理
	const handleFileUploadProgress = (event, file, fileList) => {
		upload.isUploading = true
	}
	// 文件上传成功处理
	const handleFileSuccess = (response, file, fileList) => {
		if (response.code === 200) {
			open.value = false
			upload.isUploading = false;
			uploadRef.value.clearFiles();
			ElMessageBox.alert(
				"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response
				.msg + "</div>", "导入结果", {
					dangerouslyUseHTMLString: true,
				}).then(() => {

			}).catch(() => {})
			getList()
		} else {
			ElMessage.error(response.msg)
		}
	}
	// 提交导入文件
	const submitFileForm = () => {
		uploadRef.value.submit();
	}
	// 导出
	const handleDown = () => {
		commonDownload('/back/renfang/jjmb/mes/export').then(async result => {
			await commonTemplate(upload.title, result)
		})
	}
	//下载模版
	const importTemplate = () => {
		commonDownload('/back/renfang/jjmb/mes/importTemplate').then(async result => {
			await commonTemplate(upload.title, result)
		})
	}
	const closeWindow = () => {
		addOpen.value = false
		editOpen.value = false
	}
	//行政区
	const getXzqList = () => {
		commonGetDistrictList().then(result => {
			if (result.code === 200) options.value = result.data
		})
	}
	// 回显行政区name
	const getName = (e) => {
		let obj = {}
		obj = options.value.find(item => item.dictValue == e)
		return obj?.dictLabel
	}

	//类型
	const getJjmbType = () => {
		commonJjmbType().then(result => {
			if (result.code === 200) jjmbOptions.value = result.data
		})
	}

	const getJjmbTypeName = (e) => {
		let obj = {}
		obj = jjmbOptions.value.find(item => item.dictValue == e)
		return obj?.dictLabel
	}

	//指挥部
	const getZhb = () => {
		commonZhbList().then(result => {
			if (result.code === 200) zhbOptions.value = result.data
		})
	}
	const getZhbName = (e) => {
		let obj = {}
		obj = zhbOptions.value.find(item => item.id == e)
		return obj?.name
	}

	//等级
	const getLevel = () => {
		commonJjmbLevel().then(result => {
			if (result.code === 200) levelOptions.value = result.data
		})
	}

	const getLevelName = (e) => {
		let obj = {}
		obj = levelOptions.value.find(item => item.dictValue == e)
		return obj?.dictLabel
	}

	const handleZhz = (e) => {

		if (e) router.push({
			path: '/important/zhz',
			query: {
				unit: e.id
			}
		})
	}
	const handleFhbw = (e) => {
		if (e) router.push({
			path: '/important/fhbw',
			query: {
				target: e.id,
			}
		})
	}
	const handleYxfw = (e) => {
		if (e) router.push({
			path: '/important/yxfw',
			query: {
				unit: e.id
			}
		})
	}
	const handleFhzyd = (e) => {
		if (e) router.push({
			path: '/important/fhzyd',
			query: {
				unit: e.id
			}
		})
	}
	const handleXxfhcs = (e) => {
		if (e) router.push({
			path: '/important/xxfhcs',
			query: {
				unit: e.id
			}
		})
	}
	const handleZbmx = (e) => {
		if (e) router.push({
			path: '/important/zbmx',
			query: {
				unit: e.id
			}
		})
	}
	const handleDjfs = (e) => {
		if (e) router.push({
			path: '/important/djfs',
			query: {
				unit: e.id
			}
		})
	}

	const handleZkzb = (e) => {
		if (e) router.push({
			path: '/important/zkzb',
			query: {
				unit: e.id
			}
		})
	}
	const handleTxwl = (e) => {
		if (e) router.push({
			path: '/important/txwl',
			query: {
				unit: e.id
			}
		})
	}
	const handleTxzb = (e) => {
		if (e) router.push({
			path: '/important/txzb',
			query: {
				unit: e.id
			}
		})
	}


	getXzqList()
	getJjmbType()
	getZhb()
	getLevel()
	getList()
</script>

<style lang="scss" scoped>
</style>